<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="svg-container">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xml:space="preserve"
        width="500"
        height="440"
      >
        <!-- svg code -->
        <circle cx="100" cy="100" r="50"></circle>
      </svg>

      <canvas id="canvas"></canvas>
    </div>

    <script>
      // 获取 svg resource
      const svgString = new XMLSerializer().serializeToString(document.querySelector('svg'))
      console.log(svgString)

      // svg 转 Canvas
      var img = new Image()
      var svg = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' })

      var DOMURL = self.URL || self.webkitURL || self
      var url = DOMURL.createObjectURL(svg)
      img.src = url

      img.onload = function () {
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
      }
    </script>
  </body>
</html>
